<template>
	<view class="container">
		<mescroll-body ref="mescrollRef" :sticky="true" @down="downCallback" @init="mescrollInit" :down="{ use: true }"
			:up="upOption" @up="upCallback">
			<view class="serach">
				<u-search @change="searchChange" :showAction="false" placeholder="请输入搜索内容"
					v-model="customRemarks"></u-search>
				<view class="btn">
					<u-button color="#FF0000" type="primary" size="small" text="新增" @click="add"></u-button>
				</view>

			</view>
			<view class="coupon-item" @click="detail(item)" v-for="(item, index) in listData" :key="index">
				<view class="top">
					<view class="title">
						<text>下单号：</text>
						<text>{{item.id}}</text>
					</view>

					<u-tag v-if="item.confirmTime" text="已下单" type="success" plain></u-tag>
					<u-tag v-else text="未下单" type="warning" plain></u-tag>

				</view>

				<view class="item">
					<text>收货人：</text>
					<text>{{item.customContacts}}</text>
				</view>
				<view class="item">
					<text>下单时间：</text>
					<text>{{item.confirmTime == null ?'-' : item.confirmTime}}</text>
				</view>
			</view>
		</mescroll-body>
	</view>
</template>

<script>
	import MescrollMixin from '@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins'
	import {
		getEmptyPaginateObj,
		getMoreListData
	} from '@/core/app'
	import {
		listMallOrderPotoPageMall
	} from '@/api/home'
	import {
		CouponTypeEnum
	} from '@/utils/enum/cpupon/index.js'

	const pageSize = 15
	export default {
		mixins: [MescrollMixin],
		data() {
			return {
				clientId: uni.getStorageSync("mUserinfo").user_id,
				// 枚举类
				CouponTypeEnum,
				customRemarks: '',
				listData: [],
				 
				reFresh: '',
				// 上拉加载配置
				upOption: {
					// 首次自动执行
					auto: true,
					// 每页数据的数量; 默认10
					page: {
						size: pageSize
					},
					// 数量要大于4条才显示无更多数据
					noMoreSize: 4,
					// 空布局
					empty: {
						tip: '亲，暂无数据'
					}
				}
			}
		},


		watch: {
			//监听reFresh,如果有修改就执行监听器
			reFresh: function() {
				this.listData = []
				this.mescroll.resetUpScroll()
			}
		},
		methods: {
			detail(item) {
				uni.navigateTo({
					url: './detail?id=' + item.id
				})
			},
			add() {
				uni.navigateTo({
					url: './add'
				})
			},
			async upCallback(page) {

				const res = await listMallOrderPotoPageMall({
					current: page.num,
					size: 15,
					customRemarks: this.customRemarks
				})
				if (res) {
					this.mescroll.endBySize(res.records.length, res.total);
					if (page.num == 1) this.listData = []
					this.listData = this.listData.concat(res.records);
				}
			},
			downCallback() {
				this.listData = []
				this.mescroll.resetUpScroll()
			},
			searchChange() {
				this.listData = []
				setTimeout(() => {
					this.mescroll.resetUpScroll()
				}, 120)
			},

		}
	}
</script>
<style>
	page {
		background: #f5f5f5;
		padding: 0 10rpx;
	}
</style>
<style lang="scss" scoped>
	.serach {
		display: flex;
		padding: 10rpx 20rpx;
		box-sizing: border-box;
		margin-bottom: 20rpx;
		background-color: #fff;

		.btn {
			width: 150rpx;
			margin-left: 20rpx;

		}
	}

	//文字平均分配

	::v-deep .u-tabs__wrapper__nav[data-v-48634e29] {
		display: flex;
		flex-direction: row;
		position: relative;
		justify-content: space-between;
	}

	//选中蓝色滑块对应

	::v-deep .u-tabs__wrapper__nav__item {
		flex: 1 1 0% !important;
	}

	.coupon-list {
		padding: 20rpx;
	}


	.coupon-item {
		position: relative;
		overflow: hidden;
		margin-bottom: 22rpx;
		padding: 15rpx;
		box-sizing: border-box;
		background-color: #fff;

		.top {
			display: flex;
			justify-content: space-between;
		}

		.title {
			padding: 10rpx 0;
			font-size: 28rpx;
			font-weight: 700;
		}

		.item {
			padding: 10rpx 0;
			font-size: 26rpx;
		}

	}
</style>